<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const items = [
  {
    title: '每日登录打卡',
    description: '每日登录考研考霸，可获得1学币',
    completed: false,
  },
  {
    title: '每日完成任务',
    description: '每日完成任务，可获得1学币',
    completed: false,
  },
  {
    title: '学习时常兑换',
    description:
        '根据学习时常进行兑换，10分钟=1学币（今日已完成）',
    completed: true,
  },
  {
    title: '学习报告分享',
    description: '分享学习报告，可获得2学币',
    completed: false,
  },
  {
    title: '邀请好友',
    description: '每成功邀请1个通讯录好友可获得10学币',
    completed: false,
  },
];
const onClickLeft1=()=>{
  router.push('/myLearnMoney')

}
</script>

<template>
  <div class="container">
    <h1 class="title">如何免费获得学币</h1>
    <van-nav-bar

        left-text="返回"
        left-arrow
        @click-left="onClickLeft1"
    />
    <div class="list-container">
      <div v-for="(item, index) in items" :key="index" class="item">
        <img src="../my/images/laopo4.jpg" alt="Coin Icon" class="coin-icon" />
        <div class="item-content">
          <h2 class="item-title">{{ item.title }}</h2>
          <p class="item-description">{{ item.description }}</p>
        </div>
        <button class="btn" @click="handleClick(item)">去完成</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.coin-icon {
  width: 200px;
  height: 200px;
}
</style>